<template>
  <div class="main-container-app">
    <el-row class="form-contain" style="background-color: #fff;margin-bottom: 1em">
      <dou-payment-form @handleQueryDouPay="handleQueryDouPay"></dou-payment-form>
    </el-row>
    <div class="table-contain">
    <dou-payment-table :searchList="douPayRes" :listLoadingDouPay="loading"
                       @handleCurrentChangeLotFee="handleCurrentChangeDouPay"
                       @handleSizeChangeLotFee="handleSizeChangeDouPay"></dou-payment-table>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import DouPaymentForm from "./doublePaymentChild/douPaymentForm";
  import DouPaymentTable from "./doublePaymentChild/douPaymentTable";
  import {fetchListDouPay} from "../../api/trademag/douPay";

  export default {
    components: {
      DouPaymentTable,
      DouPaymentForm},
    data(){
      return{
        douPayRes:null,
        loading:false,
        queryData:'',
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods:{
      handleQueryDouPay(val){
        this.queryData=val
        this.listQuery.page=1
        this.listQuery.limit=20
        this.getDataListDouPay()
      },
      handleSizeChangeDouPay(val){
        this.listQuery.limit=val
        this.listQuery.page = 1
        this.getDataListDouPay()
      },
      handleCurrentChangeDouPay(val){
        this.listQuery.page=val
        this.getDataListDouPay()
      },
      getDataListDouPay(){
        this.loading=true
        fetchListDouPay(this.listQuery,this.queryData).then(res=>{
          this.douPayRes=res
          this.loading=false
        },
          ()=>{
            this.loading=false
          })
      }
    }
  }
</script>

<style scoped>
</style>
